@import './variables.scss';

/* 
 * 通用 SCSS Mixins
 */

// 单行文本溢出省略
@mixin text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本溢出省略
@mixin text-ellipsis-multi($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 清除浮动
@mixin clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 绝对定位居中
@mixin absolute-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 水平方向的绝对定位居中
@mixin absolute-center-x() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 垂直方向的绝对定位居中
@mixin absolute-center-y() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// Flex布局垂直水平居中
@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 设置宽高
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// 圆形
@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

// 设置字体
@mixin font($size, $weight: normal, $color: inherit, $line-height: normal) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
  line-height: $line-height;
}

// flex布局
@mixin flex($direction: row, $justify: flex-start, $align: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 固定宽高比
@mixin aspect-ratio($width: 1, $height: 1) {
  position: relative;
  
  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
  }
  
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

// 边框
@mixin border($direction: all, $color: $border-color, $width: 1px, $style: solid) {
  @if $direction == all {
    border: $width $style $color;
  } @else if $direction == top {
    border-top: $width $style $color;
  } @else if $direction == right {
    border-right: $width $style $color;
  } @else if $direction == bottom {
    border-bottom: $width $style $color;
  } @else if $direction == left {
    border-left: $width $style $color;
  }
}

// 细线边框（1物理像素）
@mixin hairline($direction: all, $color: $border-color) {
  @if $direction == all {
    border: 1px solid $color;
  } @else if $direction == top {
    border-top: 1px solid $color;
  } @else if $direction == right {
    border-right: 1px solid $color;
  } @else if $direction == bottom {
    border-bottom: 1px solid $color;
  } @else if $direction == left {
    border-left: 1px solid $color;
  }
  
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    transform-origin: 0 0;
    @if $direction == all {
      transform: scale(0.5);
    } @else if $direction == top {
      transform: scaleY(0.5);
    } @else if $direction == right {
      transform: scaleX(0.5);
    } @else if $direction == bottom {
      transform: scaleY(0.5);
    } @else if $direction == left {
      transform: scaleX(0.5);
    }
  }
}

// 按钮样式
@mixin btn($bg-color: $primary-color, $color: #fff, $border-radius: $border-radius-base, $disabled-opacity: 0.6) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-color;
  color: $color;
  border-radius: $border-radius;
  padding: $spacing-sm $spacing-md;
  font-size: $font-size-base;
  line-height: 1.5;
  transition: opacity $transition-time $transition-timing-function;
  
  &:active {
    opacity: 0.8;
  }
  
  &.disabled, &[disabled] {
    opacity: $disabled-opacity;
    pointer-events: none;
  }
}

// 主按钮
@mixin btn-primary() {
  @include btn($primary-color, #fff);
}

// 次级按钮
@mixin btn-secondary() {
  @include btn($secondary-color, #fff);
}

// 朴素按钮
@mixin btn-plain($color: $primary-color) {
  @include btn(transparent, $color);
  border: 1px solid $color;
}

// 卡片样式
@mixin card() {
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow;
  padding: $spacing-base;
} 